<template>
	<div class="container">
		<Breadcrumb :items="['menu.dashboard.workplace', 'workplace.welcome']" />
		<a-row :gutter="16">
			<a-col :span="18">
				<a-card :header-style="{ paddingBottom: '12px' }">
					<template #title>
						系统简报
					</template>
					<a-grid :cols="24" :col-gap="12" :row-gap="12">
						<a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
							<a-card class="infor-card" :bordered="false"
								:style="[`background:linear-gradient(180deg, #f2f9fe 0%, #e6f4fe 100%)`]">
								<a-statistic title="随心付实付金额" :value="todayData.bizPayRecordTotal" :value-from="0"
									animation show-group-separator />
								<div class="desc">
									<a-typography-text type="secondary" class="label"> 今日新增</a-typography-text>
									<a-typography-text type="danger">
										{{ todayData.bizPayRecordTodayTotalPayMoney }}
										<icon-arrow-rise />
									</a-typography-text>
								</div>
								<div class="chart">

								</div>
							</a-card>
						</a-grid-item>

						<a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
							<a-card class="infor-card" :bordered="false"
								:style="[`background:linear-gradient(180deg, #F5FEF2 0%, #E6FEEE 100%)`]">
								<a-statistic title="本地生活实付金额" :value="todayData.bizOrderTotalPayMoney" :value-from="0"
									animation show-group-separator />
								<div class="desc">
									<a-typography-text type="secondary" class="label"> 今日新增</a-typography-text>
									<a-typography-text type="danger">
										{{ todayData.bizOrderTodayTotalPayMoney }}
										<icon-arrow-rise />
									</a-typography-text>
								</div>
								<div class="chart">

								</div>
							</a-card>
						</a-grid-item>

						<a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
							<a-card class="infor-card" :bordered="false"
								:style="[`background:linear-gradient(180deg, #f2f9fe 0%, #e6f4fe 100%)`]">
								<a-statistic title="严选实付金额" :value="todayData.orderTotalPayMoney" :value-from="0"
									animation show-group-separator />
								<div class="desc">
									<a-typography-text type="secondary" class="label"> 今日新增</a-typography-text>
									<a-typography-text type="danger">
										{{ todayData.orderTodayTotalPayMoney }}
										<icon-arrow-rise />
									</a-typography-text>
								</div>
								<div class="chart">

								</div>
							</a-card>
						</a-grid-item>

						<a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
							<a-card class="infor-card" :bordered="false"
								:style="[`background:linear-gradient(180deg, #F7F7FF 0%, #ECECFF 100%)`]">
								<a-statistic title="今日会员新增" :value="todayData.userTotal" :value-from="0" animation
									show-group-separator />
								<div class="desc">
									<a-typography-text type="secondary" class="label"> 今日新增</a-typography-text>
									<a-typography-text type="danger">
										{{ todayData.userTodayTotal }}
										<icon-arrow-rise />
									</a-typography-text>
								</div>
								<div class="chart">

								</div>
							</a-card>
						</a-grid-item>
					</a-grid>
				</a-card>

				<a-row :gutter="16">
					<a-col :span="12">
						<a-card :header-style="{ paddingBottom: '12px' }" style="margin-top: 16px;">
							<template #title>
								随心付面板
							</template>
							
						</a-card>
					</a-col>
					<a-col :span="12">
						<a-card :header-style="{ paddingBottom: '12px' }" style="margin-top: 16px;">
							<template #title>
								本地生活面板
							</template>
						</a-card>
					</a-col>

					<a-col :span="12">
						<a-card :header-style="{ paddingBottom: '12px' }" style="margin-top: 16px;">
							<template #title>
								严选面板
							</template>
						</a-card>
					</a-col>

					<a-col :span="12">
						<a-card :header-style="{ paddingBottom: '12px' }" style="margin-top: 16px;">
							<template #title>
								福利卡面板
							</template>
						</a-card>
					</a-col>
				</a-row>
			</a-col>
			<a-col :span="6">
				<a-space direction="vertical" size="large" fill>
					<a-card title="云豆情况">
						<div class="chart-container">
							<v-chart class="chart" :option="cloudBeanChartOption" autoresize="autoResize" />
						</div>
					</a-card>

					<a-card title="用户数据">
						<div class="user-chart-container">
							<v-chart class="user-chart" :option="userChartOption" autoresize="autoResize" />
						</div>
					</a-card>
				</a-space>

			</a-col>
		</a-row>

	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';
import { Message, Modal } from '@arco-design/web-vue';
import { DataApi, TodayData } from '@/api/data';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart, BarChart } from 'echarts/charts';
import {
	TitleComponent,
	TooltipComponent,
	LegendComponent
} from 'echarts/components';
import VChart from 'vue-echarts';

use([
	CanvasRenderer,
	PieChart,
	BarChart,
	TitleComponent,
	TooltipComponent,
	LegendComponent
]);

const { loading, setLoading } = useLoading(true);

const todayData = ref<TodayData>({
	bizPayRecordTotal: 0,
	bizPayRecordTodayTotalPayMoney: 0,
	bizOrderTotalPayMoney: 0,
	bizOrderTodayTotalPayMoney: 0,
	orderTotalPayMoney: 0,
	userTotal: 0,
	userTodayTotal: 0,
	orderTodayTotalPayMoney: 0,
});



// 云豆饼图配置
const cloudBeanChartOption = ref(null);
const fetchCloudBeanChartOption = async (dat: any) => {
	cloudBeanChartOption.value = {
		title: false,
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b}: {c} ({d}%)'
		},
		legend: {
			top: '0%',
			left: 'center'
		},
		series: [
			{
				name: '云豆',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 10,
					borderColor: '#fff',
					borderWidth: 2
				},
				data: dat
			}
		]
	}
};

// 用户数据统计
const userChartOption = ref(null);
const fetchUserChartOption = async (dat: any) => {
	userChartOption.value = {
		
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		xAxis: {
			type: 'category',
			data: dat.map((item: any) => item.name)
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				data: dat.map((item: any) => item.value),
				type: 'bar',
				barWidth: '60%',
				label: {
					show: true,
					position: 'top',
					formatter(params: any) {
						// 获取第一个柱体的值作为分母
						const firstValue = dat[0].value;
						// 计算百分比
						const percentage = ((params.value / firstValue) * 100).toFixed(1);
						return `${percentage}%`;
					},
					fontSize: 12,
					fontWeight: 'bold',
					color: '#333'
				},
				itemStyle: {
					color(params: any) {
						// 定义颜色数组
						const colors = [
							'#5470c6', // 蓝色
							'#91cc75', // 绿色
							'#fac858', // 黄色
							'#ee6666', // 红色
							'#73c0de', // 浅蓝色
							'#3ba272', // 深绿色
							'#fc8452', // 橙色
							'#9a60b4', // 紫色
							'#ea7ccc', // 粉色
							'#5d7092'  // 灰蓝色
						];
						// 根据数据索引返回对应颜色
						return colors[params.dataIndex % colors.length];
					}
				}
			}
		]
	}
};

const fetchScoreReport = async () => {
	try {
		const response = await DataApi.getScoreReport();
		fetchCloudBeanChartOption(response.data);
	} catch (error) {
		console.error('获取云豆使用情况失败:', error);
	}
};

const fetchTodayData = async () => {
	try {
		const response = await DataApi.getTodayData();
		todayData.value = response.data;
	} catch (error) {
		console.error('获取今日数据失败:', error);
	}
};

const fetchUserReport = async () => {
	try {
		const response = await DataApi.getUserReport();
		fetchUserChartOption(response.data);
	} catch (error) {
		console.error('获取用户数据失败:', error);
	}
};


onMounted(() => {
	fetchTodayData();
	fetchScoreReport();
	fetchUserReport();
});


fetchTodayData();
fetchScoreReport();
</script>

<script lang="ts">
export default {
	name: 'Dashboard',
};
</script>

<style lang="less" scoped>
.container {
	padding: 0 20px 20px 20px;
}

.chart-container {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;

	.chart {
		width: 300px;
		height: 300px;
		margin: 0 auto;
	}
}

.user-chart-container {
	width: 100%;
	display: flex;
	height:300px;
	justify-content: center;
	align-items: center;

	.user-chart {
		width:100vw;
		height:300px;
		margin: 0 auto;
	}
}
</style>
